import React, {Component} from 'react';
import {Map, Marker, InfoWindow, MapvLayer, PointLabel, Polyline,NavigationControl } from 'react-bmap';
import BMap from 'BMap';
import {Button, Card, Col, Icon, DatePicker, Modal, Radio, message} from "antd";
import moment from "moment";
import {wgs84tobd09} from "../../utils/coordtransform";

moment.locale('zh-cn');
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;

class BasicMap extends Component {
    constructor(props) {
        super(props);
        this.state = {
            center: {lng: 115.402544, lat: 39.928216},
            zoom: 6,

            playPosition:{lng: 115.402544, lat: 30.928216},

            isShowShareModal: false,
            isShareDone: false,
            confirmLoading: false,
            shareRsp: null,
            today: moment(),
            // prevStatus:false,
            // nextStatus:true,
            lineData: {
                day: '',
                data: [],
                device_id: ''
            },
        };
        this.Map = React.createRef();

        this.zoom = 6
    }

    handlerTrailData = (trails) => {
        const ptData = [];
        const plData = [];
        // let lastSpeed = 0;
        let lastXy = null;
        trails.data&&trails.data.forEach((item, idx) => {
            if (!item) return;
            var a = new wgs84tobd09();
            // const speed = item.speed / 1e3;
            const xy = a.convert_xy(item.lat_lng[1], item.lat_lng[0]);
            // const xy = [item.lat_lng[1], item.lat_lng[0]];
            const pt = {
                "geometry": {
                    "type": "Point",
                    "time": item.time,
                    "device_id": trails.device_id,
                    "coordinates": xy
                },
                // "fillStyle": computeColor(speed),
                "fillStyle": 'red',//这里是点的颜色
                "count": idx,
            };
            ptData.push(pt);

            if (idx > 0) {
                const pl = {
                    "geometry": {
                        "type": 'LineString',
                        "device_id": trails.device_id,
                        "coordinates": [
                            lastXy, xy
                        ]
                    },
                    // "strokeStyle": computeColor((lastSpeed + speed) / 2),
                    "strokeStyle": 'blue',//这里是线的颜色
                    "count": idx,
                };
                plData.push(pl);
            }
            // lastSpeed = speed;
            lastXy = xy;
        });
        const startPt = ptData[0];
        const endPt = ptData[ptData.length - 1];

        const centerPt = ptData[parseInt(ptData.length / 2)];
        // console.log(ptData.length,parseInt(ptData.length/2))
        let startXY = {};
        let endXY = {};
        let centerXY = {};
        if (startPt) {
            startXY = {
                lng: startPt.geometry.coordinates[0],
                lat: startPt.geometry.coordinates[1],
                device_id: startPt.geometry.device_id,
                time: startPt.geometry.time
            };
            endXY = {
                lng: endPt.geometry.coordinates[0],
                lat: endPt.geometry.coordinates[1],
                device_id: startPt.geometry.device_id,
                time: endPt.geometry.time
            };
            centerXY = {
                lng: centerPt.geometry.coordinates[0],
                lat: centerPt.geometry.coordinates[1],
                device_id: startPt.geometry.device_id,
                time: centerPt.geometry.time
            }

        }

        return [ptData, plData, startXY, endXY, centerXY];
    };


    render() {
        const {zoom,playPosition,center} = this.state;
        const that = this;
        const {
            isTrail,
            lineData
        } = this.props;
        console.log(lineData)
        const [ptData, plData, startXY, endXY, centerXY] = that.handlerTrailData(lineData);
        const ptOptions = {
            shadowBlur: 0,
            size: 5,
            draw: 'simple'
        };
        const plOptions = {
            color: 'red',
            lineWidth: 3.8,
            outlineColor: 'red',
            draw: 'simple',
        };
        return (
            <Card
                bodyStyle={{padding: '0'}}
                title={!!isTrail ?
                    <React.Fragment>
                        {/*<Button type="primary" onClick={getCurrentPoint}>当前设备: {current_device.join(',')}*/}
                        {/*    <Icon type="close"/>*/}
                        {/*</Button>*/}
                        {/*<Button onClick={this.handleClickShareMap}>创建分享链接</Button>*/}
                    </React.Fragment> : '地图'}
                bordered={false}

            >
                <div>
                    <Map ref={this.Map} center={center} zoom={zoom}
                         style={{height: 'calc(100vh - 100px)'}}
                         enableScrollWheelZoom={true}
                         enableMapClick={false}
                    >
                        <MapvLayer data={ptData} options={ptOptions}/>
                        <MapvLayer data={plData} options={plOptions}/>
                        {
                            <NavigationControl />
                        }
                    </Map>
                </div>
            </Card>
        );
    }
}

export default BasicMap;